import {MyNavBar} from '@/components'
import {ActivityIndicator, SegmentedControl} from 'antd-mobile'
import './index.less'
import {useDetailHook} from '@/hooks'
import {_getHouseViewsRank, _getHouseHot} from './store'
import Header from './components/header'
import {history} from 'umi'
import List from './components/list'
import {useEffect, useState} from 'react'

function HouseRankList() {
  const [ data, setData ] = useState([])

  const [ loading, setLoading ] = useState(false)

  const [ index, setIndex ] = useState(index)

  const getHouseViewsRank = async () => {
    setLoading(true)
    const result = await _getHouseViewsRank()
    setData(result)
    setLoading(false)
  }

  const getHouseHot = async () => {
    setLoading(true)
    const result = await _getHouseHot()
    setData(result)
    setLoading(false)
  }

  useEffect(() => {
    getHouseHot()
  }, [])

  const handleClick = (id) => {
    history.push({
      pathname: '/house/house',
      query: {
        id
      }
    })
  }

  const handleChange = (e) => {
    if (e.nativeEvent.value === '按热度') {
      setIndex(0)
      getHouseHot()
    } else {
      setIndex(1)
      getHouseViewsRank()
    }
  }

  return (
    <div>
      <MyNavBar title='排行耪'/>
      <SegmentedControl selectedIndex={index} onChange={handleChange} values={[ '按热度', '按浏览量' ]}/>
      {(loading && data?.length) ? <ActivityIndicator toast/> :
        <div className='house-rank-list'>
          <Header handleClick={handleClick} data={data[0]}/>
          <List handleClick={handleClick} data={(data && data.length > 1) ? data.slice(1) : []}/>
        </div>
      }
    </div>
  )
}

export default HouseRankList
